<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影购票</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 800px;
            height: 300px;
        }
        .picture{
            display: inline-block;
        }
        .box1{
            display: inline-block;
            width: 600px;
            height: 300px;
            border-bottom: solid;
            vertical-align: top;
        }
        .box2{
            display: inline-block;
            width: auto;
            height: auto;
            margin-top: 10px;
            border: 1px solid skyblue;
            border-radius: 5%;
        }
        .box3{
            display: inline-block;
            width: 400px;
            height: 200px;
            margin-top: 50px;
        }
        .box4{
            display: inline-block;
            vertical-align: top;
            width: 400px;
            height: 300px;
        }
        .box5{
            display: inline-block;
            width: auto;
            height: 300px;
            line-height: 300px;
        }
        .font{
            display: inline-block;
            vertical-align: top;
            font-size: 30px;
            letter-spacing: 5px;
            margin-top: 10px;
        }
        .font1{
            display: inline-block;
            width: 30px;
            color: white;
            background-color: skyblue;
            padding: 10px;
            border-radius: 5%;
        }
        .font2{
            display: inline-block;
            width: 40px;
            color: skyblue;
            background-color: white;
            padding: 10px;
            border-radius: 5%;
        }
        .wenzi{
            margin-bottom: 50px;
            color: #A8A8A8;
            font-size: 20px;
            letter-spacing: 5px;
        }
        .wenzi1{
            color: #A8A8A8;
            font-size: 20px;
            letter-spacing: 5px;
        }
        .a{
            display: inline-block;
            border: 0;
            border-radius: 30px;
            width: 100px;
            height: 40px;
            background-color: red;
            color: white;
            text-decoration: none;
            vertical-align: top;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li class="picture">
            <img src="https://img.alicdn.com/bao/uploaded/i1/O1CN015c1u4L1iGNYUh6XkN_!!6000000004385-0-alipicbeacon.jpg_300x300.jpg" alt="" width="200px" height="300px">
            <li class="box1">
                <h2 class="font">流浪地球2</h2>
                <div class="box2">
                    <span class="font1">3D</span>
                    <span class="font2">IMAX</span>
                </div>
                <ul class="box3">
                    <li class="wenzi">观众评<span class="color"><span style="color: red;">9.3</span></li>
                    <li class="wenzi">主演:吴京,刘德华,李雪健...</li>
                    <li class="wenzi1">今天255家影院放映3140场</li>
                </ul>
                <div class="box5">
                    <a href="https://dianying.taobao.com/showDetail.htm?spm=a1z21.3046609.w2.10.32c0112ahchONj&showId=1354080&n_s=new&source=current" target="_blank" class="a">购票</a>
                </div>
            </li>
        </li>
    </ul>
    <ul class="box">
        <li class="picture">
            <img src="https://img.alicdn.com/bao/uploaded/i2/O1CN01wJx3mj1WNugOqagxV_!!6000000002777-0-alipicbeacon.jpg_300x300.jpg" alt="" width="200px" height="300px">
            <li class="box1">
                <h2 class="font">蚁人与黄蜂女：量子狂潮</h2>
                <div class="box2">
                    <span class="font1">3D</span>
                    <span class="font2">IMAX</span>
                </div>
                <ul class="box3">
                    <li class="wenzi">观众评<span class="color"><span style="color: red;">8.8</span></li>
                    <li class="wenzi">主演:保罗·路德,伊万杰琳·莉莉...</li>
                    <li class="wenzi1">今天255家影院放映3140场</li>
                </ul>
                <div class="box5">
                    <a href="https://dianying.taobao.com/showDetail.htm?spm=a1z21.3046609.w2.8.32c0112aSmCdcL&showId=1345385&n_s=new&source=current" target="_blank" class="a">购票</a>
                </div>
            </li>
        </li>
    </ul>
    <ul class="box">
        <li class="picture">
            <img src="https://img.alicdn.com/bao/uploaded/i3/O1CN012H7r8K1TFikjwNnPk_!!6000000002353-0-alipicbeacon.jpg_300x300.jpg" alt="" width="200px" height="300px">
            <li class="box1">
                <h2 class="font">毒舍律师</h2>
                <div class="box2">
                    <span class="font1">2D</span>
                    <span class="font2">IMAX</span>
                </div>
                <ul class="box3">
                    <li class="wenzi">观众评<span class="color"><span style="color: red;">9.5</span></li>
                    <li class="wenzi">主演:黄子华,谢君豪,王丹妮...</li>
                    <li class="wenzi1">今天255家影院放映3140场</li>
                </ul>
                <div class="box5">
                    <a href="https://dianying.taobao.com/showDetail.htm?spm=a1z21.3046609.w2.4.32c0112avNHhMP&showId=1430102&n_s=new&source=current" target="_blank" class="a">购票</a>
                </div>
            </li>
        </li>
    </ul>
</body>
</html>